<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Damping Setup</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.font = '16px Arial';
        ctx.fillStyle = 'black';

        // Helper function to draw an arrowhead
        function drawArrowhead(ctx, toX, toY, angle, size) {
            ctx.save();
            ctx.translate(toX, toY);
            ctx.rotate(angle);
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(-size, -size / 2);
            ctx.moveTo(0, 0);
            ctx.lineTo(-size, size / 2);
            ctx.stroke();
            ctx.restore();
        }

        // --- Draw the main components ---

        // Left Magnet Support Structure
        ctx.beginPath();
        ctx.moveTo(100, 350); // Bottom-left corner
        ctx.lineTo(225, 315); // Bottom-front edge
        ctx.lineTo(225, 255); // Inner vertical edge (pole face)
        ctx.lineTo(145, 255); // Top-front edge
        ctx.lineTo(100, 350); // Left slanted edge
        ctx.moveTo(145, 255);
        ctx.lineTo(185, 225); // Top-left perspective line
        ctx.lineTo(265, 225); // Top-back edge
        ctx.moveTo(225, 255);
        ctx.lineTo(265, 225); // Top-right perspective line
        ctx.stroke();

        // Right Magnet Pole
        ctx.beginPath();
        ctx.moveTo(275, 255); // Top-inner corner
        ctx.lineTo(350, 255); // Top-front edge
        ctx.lineTo(380, 225); // Top-right perspective line
        ctx.lineTo(305, 225); // Top-back edge
        ctx.lineTo(275, 255); // Close top face path
        ctx.moveTo(350, 255);
        ctx.lineTo(350, 315); // Right vertical edge
        ctx.moveTo(275, 255);
        ctx.lineTo(275, 315); // Inner vertical edge (pole face)
        ctx.stroke();

        // Copper Sheet
        ctx.beginPath();
        ctx.rect(225, 100, 50, 160);
        ctx.stroke();

        // Hole in Copper Sheet
        ctx.beginPath();
        ctx.arc(250, 135, 6, 0, 2 * Math.PI);
        ctx.stroke();
        
        // Rod
        ctx.beginPath();
        ctx.moveTo(190, 80);
        ctx.lineTo(310, 150);
        ctx.moveTo(200, 75);
        ctx.lineTo(320, 145);
        ctx.stroke();

        // Motion Arrows
        // Left arrow
        ctx.beginPath();
        ctx.arc(200, 295, 40, Math.PI * 0.75, Math.PI * 0.98);
        ctx.stroke();
        drawArrowhead(ctx, 200 + 40 * Math.cos(Math.PI * 0.98), 295 + 40 * Math.sin(Math.PI * 0.98), Math.PI * 0.98 + Math.PI/2, 10);

        // Right arrow
        ctx.beginPath();
        ctx.arc(300, 295, 40, Math.PI * 0.25, Math.PI * 0.02, true);
        ctx.stroke();
        drawArrowhead(ctx, 300 + 40 * Math.cos(Math.PI * 0.02), 295 + 40 * Math.sin(Math.PI * 0.02), Math.PI * 0.02 - Math.PI/2, 10);


        // --- Labels and Leader Lines ---

        // "copper sheet" label
        ctx.textAlign = 'left';
        ctx.fillText('copper sheet', 50, 115);
        ctx.beginPath();
        ctx.moveTo(148, 115);
        ctx.lineTo(225, 125);
        ctx.stroke();

        // "X" label
        ctx.fillText('X', 200, 140);
        ctx.beginPath();
        ctx.moveTo(212, 138);
        ctx.lineTo(244, 136);
        ctx.stroke();

        // "rod" label
        ctx.textAlign = 'right';
        ctx.fillText('rod', 350, 70);
        ctx.beginPath();
        ctx.moveTo(320, 70);
        ctx.lineTo(290, 95);
        ctx.stroke();

        // "poles of magnet" label
        ctx.textAlign = 'left';
        ctx.fillText('poles of magnet', 330, 360);
        ctx.beginPath();
        ctx.moveTo(350, 350);
        ctx.lineTo(330, 280); // To right pole
        ctx.moveTo(350, 350);
        ctx.lineTo(235, 280); // To left pole
        ctx.stroke();

        // "Fig. 9.3" label
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 9.3', 250, 380);

    </script>
</body>
</html>